<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-04-25 14:29:27
 * @LastEditors: your name
 * @LastEditTime: 2024-04-25 14:30:38
-->
<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-01-24 15:58:06
 * @LastEditors: your name
 * @LastEditTime: 2024-01-24 16:24:11
-->
<template>
    <panel :panelStyle="{
        width: '500px',
        pointerEvents: 'all',
        backgroundColor: 'rgba(0,0,0,.2)',
        color: '#fff', position: 'absolute',
        top: '100px', left: '30px'
    }">
        <template #head>
            <span>地图场景配置</span>
        </template>
        <template #content>
            <div style="padding: 20px;">
                <div class="divider">
                    <span style="display:inline-block; width: 100px">全局特效</span>
                </div>
                <hr />
                <div class="skySwitch">
                    <span style="display:inline-block; width: 100px">天空切换:</span>
                    <div v-for="(item, index) in skyBoxOpts" class="skyitems">
                        <img :src="item.pic" alt="" class="imgStyle" @click="changeSky(item.key)" />
                        <span>{{ item.title }}</span>
                    </div>
                </div>
            </div>
        </template>
    </panel>
</template>
<script setup>
import { ref, inject } from 'vue'
import panel from '@/components/panel.vue';

import { skyBoxData } from '@/config/config.js'

// 获取viewer
const { viewer, tile } = inject('$viewer_tile')

// 天空盒配置
const skyBoxOpts = skyBoxData()

// 更换天空盒
const changeSky=(key)=>{

}   

</script>

<style lang="scss">
.sceneManger {
    width: 25%;
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 999;
}

.skySwitch,
.modelSwith {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

.skyitems {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;

    >img {
        &:hover {
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
    }
}

.imgStyle {
    width: 40px;
    height: 40px;
}

.sliderArea {
    display: flex;
    align-items: center;

    .slider {
        width: 100px;
    }
}

.divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
